<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layout/offline">
<head>
    <title>Login</title>
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
    
</head>
<body>
    <main layout:fragment="content">
        <article class="container" style="padding-top: 3%;">
            <header class="row">
                <div class="col s12">
                    <h3 class="center">登录</h3>
                    <h5 class="center">Sign in</h5>
                    <p class="center flow-text" th:if="${param.error}">请输入正确的用户名或密码!</p>
                </div>
            </header>
            <section>
                <form th:action="@{/login}" method="post">
                    <div class="row">
                        <div class="col s12">
                            <label> 用户名:
                                <input type="text" name="username" maxlength="10" data-length="10" required="required"/>
                            </label>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col s12">
                            <label> 密码:
                                <input type="password" name="password" maxlength="10" data-length="10" required="required"/>
                            </label>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col s12 center">
                            <button class="btn waves-effect waves-light btn-large" type="submit" name="login">登录</button>
                        </div>
                    </div>
                    <!-- 这一句主要防止CSRF攻击 -->
                    <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
                </form>
            </section>
        </article>
    </main>
    <!-- <script src="/webjars/jquery/3.2.1/jquery.min.js"></script>
    <script src="/webjars/materializecss/0.100.2/js/materialize.min.js"></script> -->
    <script type="text/javascript"  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript"  src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>